<template>  
    <view class="app-modal">
			<view class="app-modal-mask"></view>
			<view class="app-modal-container">  
					<view class="app-modal-container-header" v-if="title">  
							<text class="app-modal-container-header-text">{{title}}</text>  
					</view>  
					<view class="app-modal-container-content">  
							<view v-if="input"  class="content_input">  
									<input v-model="inputContent" class="input" placeholder-class="input" :placeholder="inputContent" maxlength="20" type="text" />
							</view>  
							<text class="app-modal-container-content-text" :style="{textAlign: align}">{{content}}</text>  

					</view>  
					<view class="app-modal-container-footer">  
							<view v-if="showCancel" style="width: 226rpx" class="app-modal-container-footer-left" hover-class="app-modal-container-footer-hover" :hover-start-time="20" :hover-stay-time="70" @click="clickLeft" >  
									<text class="app-modal-container-footer-left-text">{{cancelText}}</text>  
							</view>  
							<view :style="{width: showCancel?'226rpx':'452rpx'}" class="app-modal-container-footer-right" hover-class="app-modal-container-footer-hover" :hover-start-time="20" :hover-stay-time="70" @click="clickRight"  >  
									<text class="app-modal-container-footer-right-text" >{{confirmText}}</text>  
							</view>  
					</view>  
			</view>  
    </view>  
</template>  

<script>  
    export default {  
        data() {  
            return {  
                title: "",  
                content: "",   
                input:false,  
                inputContent:'',  
                align: "center", // 对齐方式 left/center/right  
                cancelText: "取消", // 取消按钮的文字  
                confirmText: "确定", // 确认按钮颜色  
                showCancel: true, // 是否显示取消按钮，默认为 true  
            };  
        },  
        onBackPress(options) {  
            if (options.from === 'navigateBack') {  
                return false;    
            }    
            return true;    
        },  
        onLoad(options) {  
            if (options.showCancel) {  
                options.showCancel = JSON.parse(options.showCancel)  
            }  
            Object.assign(this.$data, options)  
        },  
        methods: {  
            clickLeft() {  
                // 先关闭后发送事件  
                this.closeModal();  
                uni.$emit('AppModalCancel')  
            },  
            clickRight() {  
                // 先关闭后发送事件  
                this.closeModal();  
                uni.$emit('AppModalConfirm',this.inputContent)  
            },  
            closeModal() {  
                uni.navigateBack();  
            }  
        }  
    }  
</script>  

<style>
	page {
		/* 必须的样式，这是页面背景色为透明色 */
		background: transparent; 
	}
</style>
<style lang="scss">  
.app-modal-mask {
    position: fixed;
    z-index: 999;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
}
.app-modal-container {
    position: fixed;
    z-index: 999;
    width: 80%;
    max-width: 300px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #ffffff;
    text-align: center;
    border-radius: 3px;
    overflow: hidden;
		.app-modal-container-header {
		    padding: 1em 1.6em 0.3em;
				.app-modal-container-header-text {
				    font-weight: 400;
				    font-size: 18px;
				    word-wrap: break-word;
				    word-break: break-all;
				    white-space: pre-wrap;
				    overflow: hidden;
				    text-overflow: ellipsis;
				    display: -webkit-box;
				    -webkit-line-clamp: 2;
				    -webkit-box-orient: vertical;
				}
		}
		.app-modal-container-content {
		    padding: 1.3em 1.6em 1.3em;
		    min-height: 40px;
		    font-size: 15px;
		    line-height: 1.4;
		    word-wrap: break-word;
		    word-break: break-all;
		    white-space: pre-wrap;
		    color: #999999;
		    max-height: 400px;
		    overflow-x: hidden;
		    overflow-y: auto;
		}
		.app-modal-container-footer {
		    position: relative;
		    line-height: 48px;
		    font-size: 18px;
		    display: flex;
				.app-modal-container-footer-left,.app-modal-container-footer-right {
				    display: block;
				    flex: 1;
				    color: #3cc51f;
				    text-decoration: none;
				    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
				    position: relative;
				    cursor: pointer;
				}
				.app-modal-container-footer-left {
				    color: #353535;
				}
				.app-modal-container-footer-right {
				    color: #007aff;
				}
				.app-modal-container-footer-right:after {
				    content: ' ';
				    position: absolute;
				    left: 0;
				    top: 0;
				    width: 1px;
				    bottom: 0;
				    border-left: 1px solid #d5d5d6;
				    color: #d5d5d6;
				    transform-origin: 0 0;
				    transform: scaleX(0.5);
				}
		}
		.app-modal-container-footer:after {
		    content: ' ';
		    position: absolute;
		    left: 0;
		    top: 0;
		    right: 0;
		    height: 1px;
		    border-top: 1px solid #d5d5d6;
		    color: #d5d5d6;
		    transform-origin: 0 0;
		    transform: scaleY(0.5);
		}
}
</style>  